<template>
  <flight-menu left>
    <template v-slot:header>
      <span class="f-menu--title">
        {{ title }}
      </span>
    </template>
    <template v-slot:default>
      <div class="f-menu--legend row row--column shrink">
        <div class="row">
          <div class="col row justify-content-end nowrap">
            <span>单位：架</span>
            <div class="l-icon-1"></div>
            <span>入境飞机</span>
          </div>
          <div class="f-left-row--nation"></div>
          <div class="col row">
            <div class="l-icon-2"></div>
            <span>出境飞机</span>
          </div>
        </div>
        <template v-for="(gn, i) in globalArr">
          <left-row
            v-if="gn.name !== '亚洲'"
            :key="i"
            :nation="gn.name"
            :entry="gn.entry"
            :exit="gn.exit"
            :max-entry="maxEntry"
            :max-exit="maxExit"
          ></left-row>
          <div v-else :key="'else' + i" class="row row--column">
            <left-row
              :nation="gn.name"
              :entry="gn.entry"
              :exit="gn.exit"
              :max-entry="maxEntry"
              :max-exit="maxExit"
            ></left-row>
            <left-row
              v-for="(cn, j) in chinaArr"
              :key="'sub' + j"
              :nation="cn.name"
              :entry="cn.entry"
              :exit="cn.exit"
              :max-entry="maxEntry"
              :max-exit="maxExit"
              sub-group
            ></left-row>
          </div>
        </template>
      </div>
    </template>
  </flight-menu>
</template>

<script>
import FlightMenu from '../FlightMenu.vue';
import LeftRow from './LeftRow.vue';
import { useCheckboxInjector } from '../../composables/useChecbox.ts';
import { isUndefined } from '@lagabu/tool';
export default {
  name: 'SecondLeft',
  components: {
    FlightMenu,
    LeftRow,
  },
  setup() {
    const { register, unregister, computedAirport } = useCheckboxInjector();
    return { register, unregister, computedAirport };
  },
  data() {
    return {
      title: '各大洲及港澳台出入航班情况',
      chinaArr: [],
      globalArr: [],
      maxEntry: 1,
      maxExit: 1,
    };
  },
  mounted() {
    this.getContinentalFlights();
    this.register(this.getContinentalFlights);
  },
  beforeUnmount() {
    this.unregister(this.getContinentalFlights);
  },
  methods: {
    solveFlights(arr, china = false) {
      if (china) {
        this.chinaArr = [];
      } else {
        this.globalArr = [];
      }
      for (let elem of arr) {
        this.maxEntry = Math.max(this.maxEntry, +elem.entry);
        this.maxExit = Math.max(this.maxExit, +elem.exit);
        if (china) {
          this.chinaArr.push(elem);
        } else {
          this.globalArr.push(elem);
        }
      }
    },
    getContinentalFlights() {
      if (isUndefined(this.computedAirport)) return;
      return this.$http
        .get('/continentalFlights', {
          airport: this.computedAirport,
        })
        .then((result) => {
          if (result && result.status && result.status === 200) {
            const data = result.data;
            if (!data) return;
            data['china'] && this.solveFlights(data['china'], true);
            data['global'] && this.solveFlights(data['global']);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>
